<template>
  <div class="dashboard-container">
    <!-- 机构概述和今日数据 -->
    <dataInfo :organoverview="organOverview" :todaydata="todayData" />
    <!-- 待办任务和执行中任务 -->
    <missionList :backlog="backlog" :todaydata="todayData" />
    <!-- 常用功能 -->
    <commonUsed />
    <!-- 线路管理和运输任务 -->
    <transport :transporttasklist="transportTaskList" />
    <!-- 订单总量和订单分布 -->
    <orderTotal :orderlinechart="orderLineChart" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { workspace } from '@/api/user'
import dataInfo from './components/dataInfo.vue'
import missionList from './components/missionList.vue'
import commonUsed from './components/commonUsed.vue'
import transport from './components/transportManger.vue'
import orderTotal from './components/orderTotal.vue'

export default {
  name: 'Dashboard',
  components: {
    dataInfo,
    missionList,
    commonUsed,
    transport,
    orderTotal
  },
  data() {
    return {
      backlog: {},
      orderLineChart: {},
      organOverview: {},
      todayData: {},
      transportTaskList: [],
      time: ''
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    const res = await workspace()
    // console.log(res)
    const { backlog, orderLineChart, organOverview, todayData, transportTaskList } = res.data
    this.backlog = backlog
    this.orderLineChart = orderLineChart
    this.organOverview = organOverview
    this.todayData = todayData
    this.transportTaskList = transportTaskList
    this.nowTime()
  },
  methods: {
    nowTime() {
      const timestamp = (new Date()).valueOf()
      const time = new Date(timestamp)
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const hour = time.getHours()
      const minute = time.getMinutes()
      this.time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute)
      // console.log(this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  // &-container {

  // }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row{
  margin-bottom: 20px;
}
.el-col{
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}
.el-card{
 box-shadow: none;
}
.el-card__body{
  padding: 23px 20px;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  .el-icon-refresh{
    font-size: 14px;
    color: #818693;
    cursor: pointer;
  }
  .el-icon-refresh::before{
    font-size: 15px;
    color: #e15536;
    margin-right: 8px;
  }
}
p{
  margin:0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.content{
  display: flex;
  width: 100%;
  .info{
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 16px;
    padding-left: 10px;
    .label{
      font-size: 14px;
      color: #20232a;
      margin-bottom: 21px;
      text-align: center;
    }
    .value{
      font-size: 36px;
      color: #20232a;
      font-weight: 700;
      margin-bottom: 24px;
      text-align: center;
    }
    .update{
      font-size: 14px;
      color: #818693;
      margin-bottom: 20px;
      padding-left: 9px;
      text-align: center;
      .el-icon-caret-top{
        width: 15px;
        height: 15px;
        color: #e15536;
      }
    }
  }
  .left-content{
    flex: 50%;
    padding-left: 10px;
    border-right: 1px solid #ebeef5;
    .name{
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: 13px;
    }
    .address{
      font-size: 14px;
      color: #818693;
      margin-bottom: 8px;
    }
    .duty-people{
      font-size: 14px;
      color: #818693;
      margin-bottom: 23px;
    }
  }
  .right-content{
    flex: 50%;
    display: flex;
    flex-wrap: wrap;
    .item{
      flex: 50%;
      height: 85px;
      display: flex;
      align-items: center;
      flex-direction: column;
      .label{
        font-size: 14px;
        margin-bottom: 10px;
      }
      .num{
        font-size: 32px;
        font-weight: 700;
        color: #e15536;
        cursor: pointer;
      }
    }
  }
  .el-button{
    font-size: 14px;
    color: #e15536;
    width: 158px;
    height: 40px;
    background-color: #ffeeeb;
    border: 1px solid #f3917c;
    border-radius: 4px;
  }
}
</style>
